import { NavBar, List } from "antd-mobile";
import { SettingOutlined, MessageOutlined } from "@ant-design/icons";
import { useHistory } from "react-router-dom";
import { Avatar, Image } from "antd";
import { useEffect, useState } from "react";
import axios from "axios";
const Item = List.Item;
function My() {
  let history = useHistory();
  let [data, setData] = useState({});

  useEffect(() => {
    if (localStorage.getItem("token")) {
      let uid = localStorage.getItem("uid");
      axios
        .get("http://localhost:4000/user/detail", {
          params: {
            uid,
          },
        })
        .then((res) => {
          setData(res.data.profile);
        });
    }
  }, []);

  return (
    <div
      style={{
        backgroundColor: "#ccc",
      }}
    >
      <div style={{ borderBottom: "2px" }}>
        <NavBar
          key="1"
          mode="light"
          icon={<SettingOutlined />}
          onLeftClick={() => {
            if (localStorage.getItem("token")) {
              history.push("/settingup");
            } else {
              history.push("/login");
            }
          }}
        ></NavBar>
        <div
          style={{
            position: "absolute",
            right: "20px",
            top: "15px ",
            width: "20px",
            height: "20px",
          }}
          onClick={() => {
            if (localStorage.getItem("token")) {
              history.push("/messagebox");
            } else {
              history.push("/login");
            }
          }}
        >
          <MessageOutlined />
        </div>
      </div>
      {/* 这个是头像部分 */}
      <div style={{ minHeight: "100px" }}>
        <div
          style={{
            backgroundColor: "#fff",
            overflow: "hidden",
          }}
        >
          <div
            style={{
              marginLeft: "20px",
              marginTop: "20px",
              float: "left",
            }}
          >
            <Avatar
              src={
                <Image
                  src={
                    data.avatarUrl ||
                    "https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
                  }
                />
              }
              size={70}
            />
          </div>
          <div style={{ float: "left", marginTop: "30px", marginLeft: "20px" }}>
            <p
              style={{
                display: "block",
                width: "70px",
                height: "25px",
                border: "1px solid red",
                borderRadius: "10px",
                lineHeight: "20px",
                textAlign: "center",
              }}
            >
              {data.nickname || "超级粉丝"}
            </p>
            <p>{data.signature || "mr.li"}</p>
          </div>
          <div
            style={{
              float: "right",
              marginTop: "40px",
              marginRight: "40px",
              width: "70px",
              height: "30px",
              backgroundColor: "#ccc",
              lineHeight: "30px",
              textAlign: "center",
            }}
          >
            查看权益
          </div>
        </div>
        <div>
          <ul
            style={{
              display: "flex",
              justifyContent: "space-around",
              padding: "0",
              backgroundColor: "#fff",
            }}
          >
            <li style={{ listStyle: "none", width: "20%" }}>
              <figcaption>
                <p style={{ textAlign: "center", marginBottom: "0" }}>
                  {data.followeds || "0"}
                </p>
                <figure
                  style={{ width: "100%", margin: "0", textAlign: "center" }}
                >
                  粉丝
                </figure>
              </figcaption>
            </li>
            <li style={{ listStyle: "none", width: "20%" }}>
              <figcaption>
                <p style={{ textAlign: "center", marginBottom: "0" }}>
                  {data.follows || "0"}
                </p>
                <figure
                  style={{ width: "100%", margin: "0", textAlign: "center" }}
                >
                  关注
                </figure>
              </figcaption>
            </li>
            <li style={{ listStyle: "none", width: "20%" }}>
              <figcaption>
                <p style={{ textAlign: "center", marginBottom: "0" }}>
                  {data.playlistCount || "0"}
                </p>
                <figure
                  style={{ width: "100%", margin: "0", textAlign: "center" }}
                >
                  创建的歌单
                </figure>
              </figcaption>
            </li>
            <li style={{ listStyle: "none", width: "20%" }}>
              <figcaption>
                <p style={{ textAlign: "center", marginBottom: "0" }}>
                  {data.vipType || "0"}
                </p>
                <figure
                  style={{ width: "100%", margin: "0", textAlign: "center" }}
                >
                  我的等级
                </figure>
              </figcaption>
            </li>
          </ul>
        </div>
      </div>
      {/* 全部订单 */}
      <div>
        <Item extra="查看全部订单" arrow="horizontal" onClick={() => {}}>
          全部订单
        </Item>
        <div
          style={{
            display: "flex",
            justifyContent: "space-around",
          }}
        >
          <li
            style={{
              listStyle: "none",
              width: "20%",
              textAlign: "center",
            }}
          >
            <figcaption>
              <img src="" alt="" style={{ width: "100%", height: "80px" }} />
              <figure
                style={{ width: "100%", textAlign: "center", margin: "0" }}
              >
                待发货
              </figure>
            </figcaption>
          </li>
          <li
            style={{
              listStyle: "none",
              width: "20%",
              textAlign: "center",
            }}
          >
            <figcaption>
              <img src="" alt="" style={{ width: "100%", height: "80px" }} />
              <figure
                style={{ width: "100%", textAlign: "center", margin: "0" }}
              >
                待发货
              </figure>
            </figcaption>
          </li>
          <li
            style={{
              listStyle: "none",
              width: "20%",
              textAlign: "center",
            }}
          >
            <figcaption>
              <img src="" alt="" style={{ width: "100%", height: "80px" }} />
              <figure
                style={{ width: "100%", textAlign: "center", margin: "0" }}
              >
                待发货
              </figure>
            </figcaption>
          </li>
          <li
            style={{
              listStyle: "none",
              width: "20%",
              textAlign: "center",
            }}
          >
            <figcaption>
              <img src="" alt="" style={{ width: "100%", height: "80px" }} />
              <figure
                style={{ width: "100%", textAlign: "center", margin: "0" }}
              >
                待发货
              </figure>
            </figcaption>
          </li>
          <li
            style={{
              listStyle: "none",
              width: "20%",
              textAlign: "center",
            }}
          >
            <figcaption>
              <img src="" alt="" style={{ width: "100%", height: "80px" }} />
              <figure
                style={{ width: "100%", textAlign: "center", margin: "0" }}
              >
                待发货
              </figure>
            </figcaption>
          </li>
        </div>
      </div>
    </div>
  );
}
export default My;
